<template>
      <div class="slide-view">
        <!-- <span class="up-page"> 左箭头 </span> -->
        <a href="">
          <img 
          v-for="(item,index) in slideList":key="item" :src="item" 
          v-show="n==index"  @mouseenter="clearGo();enter()" @mouseleave="go();enter()" 
          alt="轮播图">
        </a>
        <!-- <img src="~@assets/images/Common/Banner/banner01.jpeg" alt=""> -->
       
        <!-- <span class="next-page"> 右箭头 </span> -->
        <ul class="slide-index">
          <li v-for="(v,i) in slideList" :key="i" :class="n==i ? 'active' : '' " 
              @click="n=i" @mouseenter="clearGo" @mouseleave="go" ><span></span></li>
        </ul>
        <transition name = "fade">
       <a href="#" class="more" v-show="seen">更多&nbsp;></a>
        </transition>
  </div>

</template>

<script>
import "./index.css";
export default {
  name:"Banner",
  data(){
    return{
     slideList:[
      require("../../../assets/images/Common/Banner/banner01.jpeg"),
      require("../../../assets/images/Common/Banner/banner02.jpeg"),
      require("../../../assets/images/Common/Banner/banner03.jpeg"),
      require("../../../assets/images/Common/Banner/banner04.png"),
      require("../../../assets/images/Common/Banner/banner05.jpeg")
     ],
     n:0,
     interId:null,
     seen:false
    };
},
 methods:{
      go(){
        this.interId=setInterval(() => {
          this.n++;
          if(this.n==this.slideList.length){
            this.n=0;
          }
        }, 2000);
      },
      clearGo(){
      clearInterval(this.interId)
    },
    // 更多显示消失方法
     enter(){   
        this.seen=!this.seen;
      }

    },

    mounted(){
      this.go();
    }
}
</script>

<style scoped>
.slide-view {
  width: 550px;
  height: 242px;
}
.slide-view a img{
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.slide-view .slide-index{
  display: flex;
  position: relative;
  left: 425px;
  top: -30px;
}
.slide-view .slide-index li span{
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 10px;
  border-radius: 50%;
  transition: all .2s;
}
.slide-view .slide-index .active span{
  border-width: 0;
  border-color: transparent;
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.8);
  background-image: url("~@assets/images/Common/Banner/icon_slide_selected.png");

}
.more{
  position: absolute;
  z-index: 11;
  background-color: rgba(0, 0, 0, .65);
  padding: 4px;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  color: #FFF;
  font-size: 12px;
  padding: 4px 8px;
  transition: opacity .3s;
  border-radius: 2px;
  left: 485px;
  top: 185px;
}
/* 淡入淡出效果 */
.fade-enter-active, .fade-leave-active {
    transition: opacity 1s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
}
</style>>

